<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智能编码体验</title>
    <!-- 引入Bootstrap CSS -->
    <link href="/bootstrap.min.css" rel="stylesheet">
    <link href="/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/sweetalert.min.css" rel="stylesheet">
    <link href="/index.css" rel="stylesheet">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">智能编码体验</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link"  href="/">数组交集提取</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active"  aria-current="page" href="/date">计算日期间隔</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 标签页 -->
<div class="container mt-4">
    <div class="mb-3">
        <h2>题目描述</h2>
        <p>给定两个日期，计算它们之间的间隔。输入格式为 "年-月-日 时:分:秒"，并以 "x天x小时x分x秒" 的形式输出它们之间的时间间隔。如果间隔不满一天，则不显示天数。</p>
        <h4>示例1</h4>
        <p>输入："2023-01-01 12:00:00",  "2023-01-02 12:00:00"</p>
        <p>输出：1天0小时0分0秒</p>
        <p>解释：从开始日期到结束日期恰好是24小时，即1天。</p>
        <h4>示例2</h4>
        <p>输入："2023-01-01 00:00:00","2023-01-01 23:59:59"</p>
        <p>输出：23小时59分59秒</p>
        <p>解释：从开始日期到结束日期间隔不满一天，因此只显示小时、分钟和秒。</p>
    </div>
    <div class="container mt-4">
        <div class="mb-3" style="position: relative;">
            <label for="startDateInput" class="form-label">日期1:</label>
            <input type="text" class="form-control datetimepicker" id="startDateInput">
        </div>
        <div class="mb-3" style="position: relative;">
            <label for="endDateInput" class="form-label">日期2:</label>
            <input type="text" class="form-control datetimepicker" id="endDateInput">
        </div>
        <button onclick="calculateDateInterval()" class="btn btn-primary mt-2">提交</button>
    </div>
    <div id="result" class="mt-5" style="font-size: 1.5rem;"></div>
</div>

<!-- 引入Bootstrap JS -->
<script src="/jquery-3.5.1.min.js"></script>
<script src="/moment.min.js"></script>
<script src="/popper.min.js"></script>
<script src="/bootstrap.bundle.min.js"></script>
<script src="/bootstrap-datetimepicker.min.js"></script>
<script src="/sweetalert.min.js"></script>
<script>
    $(function () {
        // 初始化日期时间选择器
        $('.datetimepicker').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss', // 设置日期时间格式
            icons: { // 设置图标
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-chevron-up",
                down: "fa fa-chevron-down",
                previous: 'fa fa-chevron-left',
                next: 'fa fa-chevron-right'
            },
            sideBySide: true // 使日期时间和时间并排显示
        });
    });

    // 计算日期间隔的函数
    function calculateDateInterval() {
        // 获取输入的日期字符串
        var date1 = $('#startDateInput').val();
        var date2 = $('#endDateInput').val();
        // 确保两个日期都已输入
        if (!date1 || !date2) {
            swal('警告', '请填写两个日期。', 'warning');
            return;
        }
        // 发送 AJAX POST 请求到后端
        $.ajax({
            url: '/date_interval', // 后端接收请求的URL
            type: 'POST',
            data: {
                date1: date1,
                date2: date2
            },
            success: function(response) {
                // 请求成功，将结果显示到页面上
                $('#result').text(response);
            },
            error: function(xhr, status, error) {
                // 请求失败，显示错误消息
                swal('错误', '发生错误：' + error, 'error');
            }
        });
    }
</script>
</body>
</html>